<template>
  <el-menu
    :default-active="defaultActive"
    @select="handleSelect"
    @open="handleOpen"
    @close="handleClose"
    :background-color="backgroundColor"
    :text-color="textColor"
    :active-text-color="activeTextColor"
    class="global-enum">
    <template v-for="item in dataArr">
      <el-submenu v-if="checkEnumAndSubEnum(item)" :index="item[indexKey]" :key="item[keyKey]">
        <template slot="title">
          <span class="w-flex-between-center">
            {{ item.name }}
             <slot name="option" v-bind:model="item"></slot>
          </span>
        </template>
        <template v-for="subItem in item.children">
          <el-submenu v-if="checkEnumAndSubEnum(subItem)" :index="subItem[indexKey]" :key="subItem[keyKey]">
            <template slot="title">
              <span class="w-flex-between-center">
                {{ subItem.name }}
                <slot name="option" v-bind:model="subItem"></slot>
              </span>
            </template>
            <el-menu-item v-for="subItem1 in subItem.children" :index="subItem1[indexKey]" :key="subItem1[keyKey]">
              <span slot="title" class="w-flex-between-center">
                {{ subItem1.name }}
                 <slot name="option" v-bind:model="subItem1"></slot>
              </span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="subItem[indexKey]" :key="subItem[keyKey]">
            <span slot="title" class="w-flex-between-center">
              {{ subItem.name }}
               <slot name="option" v-bind:model="subItem"></slot>
            </span>
          </el-menu-item>
        </template>
      </el-submenu>
      <el-menu-item v-else :index="item[indexKey]" :key="item[keyKey]">
        <span class="w-flex-between-center" slot="title">
          {{ item.name }}
           <slot name="option" v-bind:model="item"></slot>
        </span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { EnumType } from './types'

  @Component({
    components:{}
  })
  export default class EnumBaseCom extends Vue{

    @Prop(String) defaultActive?: string
    @Prop(Array) dataArr!: Array<EnumType>
    @Prop({ type: String, default: 'path' }) indexKey!: string
    @Prop({ type: String, default: 'path' }) keyKey!: string
    @Prop(String) backgroundColor!: string
    @Prop(String) textColor!: string
    @Prop(String) activeTextColor!: string

    handleSelect(...data: any[]) {
      this.$emit('select', ...data)
    }

    handleOpen<T>(...data: any[]) {
      this.$emit('open', ...data)
    }

    handleClose<T>(...data: any[]) {
      this.$emit('close', ...data)
    }


    checkEnumAndSubEnum(item: EnumType) {
      return item.children && item.children.length
    }
  }

</script>

<style lang="scss">
.global-enum {
  .el-submenu, .el-menu-item {
    position: relative;
  }
}
</style>
